<template>
    <div class="dh_register_details">
        <!-- 列表数据 pageingstate !== 2-->
        <div class="dhrb_s-content">

            <div class="dhrb_s-c-list">
 
                <div class="mb10 pb10 bb1"><span class="p5 wh bc4a f14 br5" @click="goback"><i class="el-icon-caret-left f16"></i>返回</span></div>
                <!-- <div class="bb1 mb10 pb10"><button type="button" @click="pageingstate = 3" class="pt5 pr10 pb5 pl10 br5 wh bc4a">添加员工</button></div> -->
                <table class="dhrb_scl-table tc f14">
                    <thead>
                        <tr>
                            <th>小类表ID</th>
                            <th>中文名称</th>
                            <th>英文名称</th>
                            <th>商标信息ID</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,key) in goodslist" :key="key">
                            <td>{{item.id}}</td>
                            <td>{{item.a}}</td>
                            <td>{{item.b}}</td>
                            <td>{{item.trademarkInfoid}}</td>
                            <td>
                                <!-- <button type="button" @click="outerVisible=true;for(var i in staffupdata)staffupdata[i]=item[i];staffupdata.key=key" class="wh p10 br5 bc4a">修改</button> -->
                                <button type="button" @click="staffdelete(item.id,key)" class="wh p10 br5 bcfd">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="dhrb_scl-block bt1 bcwh">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    class=" pt5 pr10 pb5 pl10">
                    </el-pagination>
                </div>
            </div>

        </div>    
    </div>
</template>

<script>
const axios = require('axios')
export default {
    components: {},
    data() {
        return {
            id: '',
            token: '',
            goodslist:[],
            currentPage: 1,					   //分页的默认页数
            pagesize: 10,                      //单页条数
            total: 0,						   //总条数
        };
    },
    computed: {},
    watch: {},
    methods: {
        goback(){
            let that = this;
            that.$router.go(-1)
        },

        // 请求商标表的商品
        requestgoods(){
            let that = this;
            let data = {trademarkInfoid:that.id,current:that.currentPage,size:that.pagesize};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goods/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                // console.log(resp)
                that.pageingstate = 1;
                that.goodslist = resp.data.data
                that.total = resp.data.code;
            }).catch( err=> {})
        },

        // 单页条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            let that = this;
            that.pagesize = val;
            that.requestgoods()
        },
        // 页数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage = val;
            that.requestgoods()
        },
    },
    created() {
        let that = this;
        that.id = this.$route.params.aid;
        // console.log(that.id)
    },
    mounted() {
        this.token = JSON.parse(sessionStorage.getItem('token'))
        this.requestgoods();

    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dh_register_brand{
    height: 100%;
}
.dhrb_s-content{
    height: 100%;
}
.dhrb_s-c-inquire{
    box-shadow: 0 0 2px #4b4b4b;  
}
/* 查询 */
.dhrb_sci-form{
    background-color: #ffffff;
    box-shadow: 0 0 2px #4b4b4b;
    border-radius: 5px;
}
/* 列表数据 */
.dhrb_s-c-list{
    display: flex;
    flex-direction: column;
    height: calc(100% - 91px);
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 2px #4b4b4b;
}
.dhrb_scl-table{
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-spacing: 0;/*去掉单元格间隙*/
}
.dhrb_scl-table th{
    background-color: #ececec;
}
.dhrb_scl-table tbody tr:hover{
    background-color: #ececec;
}
.dhrb_scl-table th,.dhrb_scl-table td{
    padding: 10px 10px;
    border-left:1px solid #e0e0e0;
    border-top:1px solid #e0e0e0;
}
/* 修改的弹窗 */
.dxm-ltb-message{
    display: flex;
    align-items: center;
}
.xm-ltbm-title{
    min-width: 80px;
}
/* 分页 */
.dhrb_scl-block{
    margin-top: auto;
}

/* 添加 */
.dhrb_s-addgoods{
    background-color: #ffffff;
}

/* 生成模式的 */
.dhrb_s-a-select{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.dhrb_s-a-select button{
    width: 30%;
    height: 100px;
    font-size: 30px;
    color: white;
}

/* 自选的搜索框 */
.a-l-t-input{
    display: inline-block;
    width: 180px;
}
</style>